<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自定义进度条</title>
        <link rel="stylesheet" href="style.css">
        <script src="./script.js"></script>
    </head>

    <body>
        <div class="container">
            <header class="header">
                <h1>自定义进度条</h1>
                <p class="subtitle">自定义的交互式滑条控件</p>
            </header>

            <div class="controls-panel">
                <div class="controls-header">
                    <h3>自定义选项</h3>
                    <p>调整下方选项来定制滑条样式</p>
                </div>

                <div class="controls-grid">
                    <div class="control-group">
                        <label for="bgColor">轨道颜色:</label>
                        <div class="control-input">
                            <input type="color" id="bgColor" value="#e0e0e0">
                        </div>
                    </div>

                    <div class="control-group">
                        <label for="progressColor">进度条颜色:</label>
                        <div class="control-input">
                            <input type="color" id="progressColor" value="#4a90e2">
                        </div>
                    </div>

                    <div class="control-group">
                        <label for="thumbStyle">滑块样式:</label>
                        <div class="control-input">
                            <select id="thumbStyle">
                                <option value="dot">圆点</option>
                                <option value="arrow">箭头</option>
                                <option value="none">无</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group" id="arrowDirectionGroup">
                        <label for="arrowDirection">箭头方向:</label>
                        <div class="control-input">
                            <select id="arrowDirection">
                                <option value="up">向上</option>
                                <option value="down">向下</option>
                                <option value="left">向左</option>
                                <option value="right">向右</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label for="direction">滑条方向:</label>
                        <div class="control-input">
                            <select id="direction">
                                <option value="horizontal">水平</option>
                                <option value="vertical">垂直</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label for="initialValue">初始值:</label>
                        <div class="control-input">
                            <input type="range" id="initialValue" min="0" max="100" value="30">
                            <span id="initialValueDisplay">30%</span>
                        </div>
                    </div>
                </div>

                <div class="controls-footer">
                    <button id="applyBtn" class="btn btn-primary">应用设置</button>
                </div>
            </div>

            <div class="demo-panel">
                <div class="demo-header">
                    <h3>演示滑条</h3>
                    <p>预览</p>
                </div>

                <div class="demo-content">
                    <div id="customSlider" class="slider-container"></div>
                    <div id="customValue" class="value-display">当前值: 0%</div>
                </div>
            </div>
        </div>

    </body>

</html>